<template>
  <div id="home">
    <div class="menu" :style="{ width: isCollapse ? '65px' : '180px' }">
      <div class="title">
        <i class="el-icon-loading"
          style="font-size: 10px; color: #F8D568;margin-bottom: 20px; margin-right: -3px; position: relative; left: 3px;"></i>
        <span v-if="!isCollapse" class="title-text">智能账单管理</span>
        <span v-if="isCollapse"></span>
      </div>
      <el-menu :default-active="defaultMenu" class="el-menu-list" @select="handleSelect" background-color="#2a2d31"
        text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse">
        <el-menu-item index="0" @click="changeRoute('/system/main')">
          <i class="el-icon-house"></i><span slot="title">首 页</span>
        </el-menu-item>
        <el-menu-item index="1" @click="changeRoute('/system/accountManage')">
          <i class="el-icon-notebook-1"></i><span slot="title">账 单 管 理</span>
        </el-menu-item>
        <el-menu-item index="5" @click="changeRoute('/system/billsClassifier')">
          <i class="el-icon-edit"></i><span slot="title">智 能 录 入</span>
        </el-menu-item>
        <el-menu-item index="6" @click="changeRoute('/system/history')">
          <i class="el-icon-time"></i><span slot="title">历 史 记 录</span>
        </el-menu-item>
        <el-menu-item index="2" @click="changeRoute('/system/statistics')">
          <i class="el-icon-s-data"></i><span slot="title">数 据 报 表</span>
        </el-menu-item>
        <el-menu-item index="7" @click="changeRoute('/system/aiRecord')">
          <i class="el-icon-chat-dot-round"></i><span slot="title">A I 智 能 体</span>
        </el-menu-item>
        <el-menu-item v-if="isAdmin" index="3" @click="changeRoute('/system/userManage')">
          <i class="el-icon-s-custom"></i><span slot="title">用 户 管 理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="wrap">
      <el-button class="collapse-btn" @click="toggleCollapse">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </el-button>
      <div class="otherInfo">
        <div style="display: flex; align-items: center;">
          <div style="margin-right: 30px; color: #fdf; font-size: 20px;">{{ currentTime }}</div>
          <el-avatar :size="40"
            src="https://ts1.tc.mm.bing.net/th/id/R-C.e6385d5ac1bff91758c0f3d8f4892c54?rik=4wn99Yv5iQCFbA&riu=http%3a%2f%2fwww.gzkyz.com.cn%2fimg%2f2021%2f12%2f20%2f44f634bc056a0d28b9a695561ec90926.jpg&ehk=UPgzKxWXI59WdxaSHwS999guGZw6rTAeO02%2fY4m9AXY%3d&risl=&pid=ImgRaw&r=0"
            style="margin-right: 10px;"></el-avatar>
          <div class="otherInfo-title" :title="`${name}`"
            style="margin-right: 30px;margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;font-size: 20px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style: italic;color: #fea;;">
            {{ name }}
          </div>
        </div>
        <div style="display: flex; width: 50px">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="el-icon-user" style="
            font-size: 20px;
            margin-right: 10px;
            cursor: pointer;
            color: #66CCFF;
          "></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <i class="el-icon-switch-button" style="font-size: 20px; cursor: pointer; width: 150px; color: #F00;"
            @click="loginOut('/login')" title="退出"></i>
        </div>
      </div>
      <div class="wrap-content" v-if="path.indexOf('main') > -1">
        <Main />
      </div>
      <div class="wrap-content" v-else-if="path.indexOf('statistics') > -1">
        <Statistics />
      </div>
      <div class="wrap-content" v-else-if="path.indexOf('userManage') > -1">
        <UserManage />
      </div>
      <div class="wrap-content" v-else-if="path.indexOf('accountManage') > -1">
        <AccountsManage />
      </div>
      <div class="wrap-content" v-else-if="path.indexOf('billsClassifier') > -1">
        <BillsClassifier />
      </div>
      <div class="wrap-content" v-else-if="path.indexOf('history') > -1">
        <History />
      </div>
      <div class="wrap-content" v-else-if="path.indexOf('ai') > -1">
        <AiRecord />
      </div>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" destroy-on-close>
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="原密码" :label-width="formLabelWidth" prop="oldPassWord">
          <el-input v-model="form.oldPassWord" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="confirmPassWord">
          <el-input v-model="form.confirmPassWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPassword('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UserManage from '../UserManage/UserManage.vue'
import Statistics from '../Statistics/Statistics.vue'
import AccountsManage from '../AccountsManage/AccountsManage.vue'
import BillsClassifier from '../BillsClassifier/BillsClassifier.vue'
import Main from '../Main/Main.vue'
import History from '../History/History.vue'
import AiRecord from '../AI/AiRecord.vue'
import { put } from '../../utils/http'
import { Message, MessageBox } from 'element-ui'

export default {
  name: 'Home',
  components: {
    UserManage,
    Statistics,
    AccountsManage,
    BillsClassifier,
    Main,
    History,
    AiRecord,
  },
  mounted() {
    // 检查用户是否登录
    if (!sessionStorage.getItem('isLoggedIn')) {
      this.$router.push({ path: '/login' })
      return
    }

    let router = {
      '#/system/main': '0',
      '#/system/accountManage': '1',
      '#/system/statistics': '2',
      '#/system/userManage': '3',
      '#/system/billsClassifier': '5',
      '#/system/history': '6',
      '#/system/aiRecord': '7',
    }
    this.defaultMenu = router[window.location.hash]
    this.isAdmin = sessionStorage.getItem('isAdmin') == '1' ? true : false

    // 每秒更新一次当前时间
    setInterval(() => {
      this.currentTime = new Date().toLocaleString();
    }, 1000);
  },
  data() {
    let path = window.location.hash
    let validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        let reg = /^[a-zA-Z0-9]{8}$/
        if (!reg.test(value)) {
          callback(new Error('密码必须8位字母、数字组成，不能含有非法字符!'))
        }

        callback()
      }
    }
    return {
      path,
      dialogFormVisible: false,
      passwordModalVisible: false,
      form: {
        oldPassWord: '',
        password: '',
        confirmPassWord: '',
      },
      rules: {
        oldPassWord: [
          { required: true, message: '原密码不能为空', trigger: 'change' },
        ],
        password: [
          { required: true, message: '密码不能为空' },
          { validator: validatePassword, trigger: 'change' },
        ],
        confirmPassWord: [
          { required: true, message: '确认密码不能为空' },
          { validator: validatePassword, trigger: 'change' },
        ],
      },
      formLabelWidth: '120px',
      name: sessionStorage.getItem('name'),
      isAdmin: false,
      defaultMenu: '1',
      currentTime: new Date().toLocaleString(), // 修改为包含年月日时分秒的格式
      isCollapse: false, // 新增菜单栏折叠状态
    }
  },
  mounter() { },
  methods: {
    handleSelect() { },
    changeRoute(path) {
      this.path = path
      this.$router.push({ path })
    },
    loginOut(path) {
      MessageBox.confirm('确认要退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.clear()
        this.$router.push({ path })
      }).catch(() => {
        // 用户点击取消，不执行任何操作
      })
    },
    handleCommand(command) {
      if (command === 'editPassword') {
        this.dialogFormVisible = true
      }
    },
    editPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          put('/user/updateMyPsw', {
            name: sessionStorage.getItem('name'),
            oldPassword: this.form.oldPassWord,
            newPassword: this.form.password,
          }).then((res) => {
            if (res.description === 'success') {
              this.dialogFormVisible = false
              Message.success('密码修改成功')
            }
          })
        } else {
          return false
        }
      })
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
  },
}
</script>
<style>
/* 全局禁用滚动条 */
html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
}

#home {
  height: 100vh;
  /* 使页面填满整个视口高度 */
  width: 100vw;
  /* 使页面填满整个视口宽度 */
  display: flex;
}

.menu {
  background: #2a2d31;
  transition: width 0.3s;
  height: 100vh;
  /* 使菜单栏填满整个视口高度 */
  flex: 0 0 auto;
}

.collapse-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  background-color: transparent;
  /* 移除背景颜色 */
  color: white;
  /* 设置按钮颜色为白色 */
}

.wrap {
  flex: 1;
  /* 使右侧内容区域填满剩余空间 */
  position: relative;
  transition: margin-left 0.3s;
  height: 100vh;
  /* 使右侧内容区域填满整个视口高度 */
}

.menu .title {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 60px;
  vertical-align: middle;
  animation: pro-layout-title-hide 0.3s;
  background-color: #2a2d31;

}

.menu .title img {
  margin-right: 5px;
  width: 20px;
  height: 20px;

}

.otherInfo {
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 20px;
  box-shadow: 0 1px 4px rgba(22, 165, 201, 0.08);
  height: 61px;
  background-color: #2a2d31;
}

.otherInfo-title {
  color: #bfc3c2;
  font-size: 14px;
}

.otherInfo-title {
  color: #bfc3c2;
}

.wrap-content {
  height: calc(100vh - 61px);
  /* 使内容区域填满剩余高度 */
  padding: 20px;
  overflow: hidden;
  overflow-y: auto;
  background-image: url('https://bpic.588ku.com/back_pic/23/07/13/c2e61c5fc70d2f3eda69d2d41b0be635.jpg!/fw/750/quality/99/unsharp/true/compress/true');
  background-size: cover;
  background-position: center;
}

.title-text {
  font-size: 30px;
  font-family: "华文行楷", "STXingkai", cursive;
  /* 艺术字体 */
  font-style: italic;
  /* 斜体效果 */
  font-weight: 200;
  /* 细体 */
  letter-spacing: -3px;

  padding-top: 5px;

  flex: 1;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  /* 立体阴影 */

  /* 渐变核心代码 */
  background: linear-gradient(45deg,
      #dd4112 0%,

      #f47302 16%,

      #e2a603 32%,

      #dfef05 48%,

      #53fb06 64%,

      #07ca17 80%,

      #04e4f0 100%);
  -webkit-background-clip: text;
  /* 兼容性前缀 */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  /* 扩展背景尺寸 */

  /* 动态渐变动画 */
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.el-menu-item {
  margin-left: 11px;
}

/* 单独设置菜单栏图标的颜色 */
.el-menu-item i.el-icon-house {
  color: #FA8072;
  /* 首页图标颜色 */
}

.el-menu-item i.el-icon-notebook-1 {
  color: #E6A23C;
  /* 账单管理图标颜色 */
}

.el-menu-item i.el-icon-edit {
  color: #87CEFA;
  /* 智能录入图标颜色 */
}

.el-menu-item i.el-icon-time {
  color: #EE82EE;
  /* 历史记录图标颜色 */
}

.el-menu-item i.el-icon-s-data {
  color: #67C23A;
  /* 数据报表图标颜色 */
}

.el-menu-item i.el-icon-chat-dot-round {
  color: #409EFF;
  /* AI智能体图标颜色 */
}

.el-menu-item i.el-icon-s-custom {
  color: #a63eb8;
  /* 用户管理图标颜色 */
}
</style>
